<template>
	<view>

		<tui-list-view title="" class="tui-list-view">
			<tui-list-cell @click="clk(0)" :arrow="true" class="tui-list">
				<text class="tui-list-cell-name">头像</text>
				<image :src="userInfo.thumb" class="tui-msg-pic tui-right" mode="widthFix"></image>
			</tui-list-cell>
		</tui-list-view>
		

		

		<tui-list-view title="" class="tui-list-view">
			<tui-list-cell v-for="(item,index) in fromDatas" :key="index"  :arrow="!item.isEdit" class="tui-list" @click="clickHandler(item)">
				<text >{{item.name}}</text>
				<text v-if="!item.isEdit" class="tui-right">{{item.value}}</text>
				<input v-else-if="item.dataType=='text'" placeholder-class="phcolor" focus class="tui-input" name="age" placeholder="请输入" @blur="blurHandler($event,item)" />
				<tui-actionsheet v-else-if="item.dataType=='sheet'" :show="item.isEdit" :tips="item.tips" :item-list="item.itemList" 
		 		 :is-cancel="item.isCancel" @click="itemClick($event,item)" @cancel="item.isEdit=!item.isEdit"></tui-actionsheet>
				
			</tui-list-cell>
			
		</tui-list-view>

		<tui-list-view title="" class="tui-list-view">
			<tui-list-cell  :arrow="true" class="tui-list" @click="goDetailPage('/pages/user/rest_pwd/rest_pwd')">
				<text>修改密码</text>
			</tui-list-cell>
		</tui-list-view>
			<avatar @upload="_uploadImg" @avtinit="doBefore" quality="1" ref="avatar"></avatar>
	
	</view>
</template>

<script>
	import {user,navigate,http} from '@/common/framework';
	import {saveUserInfo} from '@/pages/user/interface.js';

   
    import config from '@/common/config';
	import avatar from "@/components/other-com/yq-avatar/yq-avatar.vue";
	export default {
		components:{
			avatar
		},
		data() {
			return {
				userInfo:{
					title: '用户名',
					note: '点击登录',
					thumb: 'https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png',
					url: 'user_info'
				},
				
				fromDatas:[{
					isEdit:false, //是否是编辑状态
					allowEdit:false, //是否允许编辑
					dataType:'text', //编辑时候，编辑类型
					sendKey:'userName',//保存时候的保存字段名
					name:"工号",
					value:'2341234'
				},{
					isEdit:false,
					allowEdit:false,
					dataType:'text',
					sendKey:'userName',
					name:"手机号",
					value:'15288363691'
				},{
					isEdit:false,
					allowEdit:true,
					dataType:'text',
					sendKey:'realname',
					name:"名字",
					value:'haoleday'
				},{
					isEdit:false,
					allowEdit:true,
					dataType:'sheet',
					sendKey:'sex',
					tips:'选择您的性别',
					isCancel:false,
					itemList:[{ //备选数据
							text: "男",
							color: "#1a1a1a"
						}, {
							text: "女",
							color: "#1a1a1a"
						}],
					name:"性别",
					value:'男'
				},{
					isEdit:false,
					allowEdit:true,
					dataType:'text',
					sendKey:'email',
					name:"邮箱",
					value:'haoleday'
				}],
				urls: [],
			};
		},
		mounted(){
			this.initUserInfo();
			
		},
		computed: {
			getUserInfo(){
				return this.$store.getters.getUserInfo;
			}
		},
		methods:{
			goDetailPage(url){
				url+='?username='+this.getUserInfo.userName;
				navigate.gotoPage(url)
			},
			initUserInfo() {
				
				let user_  = this.getUserInfo;
				console.log('this.getUserInfo:',this.getUserInfo);
				this.initForm(user_);
				if (user_) {
					this.isLogin=true;
					this.userInfo.title = user_.userName;
					this.userInfo.note = "点击修改资料";
					if (user_.headerImg) {
						this.userInfo.thumb = user_.headerImg;
					}
				}
			},
			clickHandler(data){
				data.allowEdit?data.isEdit=!data.isEdit:uni.showToast({
					icon:'none',
					title:'不允许编辑！'
				})
			},
			blurHandler(evt,data){
				data.isEdit = !data.isEdit;
				if(evt.target.value && evt.target.value!=data.value){
					data.value = evt.target.value;
					this.saveUserInfo_({
							[data.sendKey] :data.value
						});
				}
			},
			itemClick(evt,data){
				let _val = data.itemList[evt.index].text;
				if(_val != data.value){
					data.value = _val;
					this.saveUserInfo_({
						[data.sendKey] :_val=='男'?1:2
					});
				}
			},
			initForm(data){
				this.fromDatas.map(item=>{
					if(data.backup[item.sendKey]){
						if(item.sendKey =='sex'){
							item.value =  data.backup[item.sendKey]==1?'男':'女';
						}else{
							item.value =  data.backup[item.sendKey];
						}
					}					
				})
			},
			async saveUserInfo_(params){
				params['id'] = this.getUserInfo.userId;
				let Res = await saveUserInfo(params);
				if(Res && Res.success){
					uni.showToast({
						icon:'none',
						title:'保存成功~！',
					})
				}else{
					uni.showToast({
						icon:'none',
						title:Res.message ||'保存失败~！',
					})
				}
			},
			
			doBefore() {
				console.log('doBefore');
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index,{
					selWidth: '500upx', selHeight: '500upx', 
					expWidth: '500upx', expHeight: '500upx',
					inner: index ? 'true' : 'false'
				});
			},
			 //图片上存
           async _uploadImg(rsp){
               let _this = this;
            //    _this.$set(_this.urls, rsp.index, rsp.path);
               let path = rsp.path;
               console.log(JSON.stringify(path));
               uni.showLoading({
                    title: '上传中...'+_this.progress +'%'
                });
               let parpms = {
                   url:config.webApiUrl+'/kmlc/sys/common/upload',
                   file:path,
                   name:'file',
                   data:{
                       file:path
                   },
                   onSuccess:function(Res){
						Res =typeof Res=='string'?JSON.parse(Res):Res;
                       
                       if(Res && Res.success){
                          
                            _this.saveUserHead(Res.message);
                        }else{
                            uni.showToast({
                                icon:'none',
                                title:Res.message ||'保存失败~！',
                            })
                        }
                       
                   },
                   onFail:function(res){
                       console.log('onFail:',JSON.stringify(res));
                       uni.showToast({
                            icon:'none',
                            title:res.message ||'保存失败~！',
                       })
                   },
                   onProgressUpdate:function(res){
                    //    console.log('onProgressUpdate:',JSON.stringify(res));
                        _this.progress = res.progress;
                   },
               };
               console.log(JSON.stringify(parpms));
               http.upload(parpms);
            
            },//修改的头像保存到用户信息
            async saveUserHead(path){
                let params ={
                    id:this.getUserInfo.userId,
                    avatar:path
				}
				console.log('params:',params);
                let Res = await saveUserInfo(params);
              
                if(Res && Res.success){
                    uni.hideLoading();
                    let _user = user.getUserInfo();
                    _user.headerImg = this.userInfo.thumb= config.webApiUrl+'/kmlc/'+path;
                    user.setUserInfo(_user);
                    setTimeout(()=>{
						uni.$emit('reloadUser'); //通知其他页面刷新用户数据
					},200)
                   
                }else{
                    uni.showToast({
                        icon:'none',
                        title:Res.message ||'保存失败~！',
                    })
                }
            },
		
		}
	}
</script>

<style lang="scss">
	
.jiange{
		// border-top: 0.5px solid #ccc;
		// border-bottom: 0.5px solid #ccc;
		background-color: #ddd;
		height: 1vh;
		
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		display: block;
		margin-right: 24upx;
	}

	.tui-msg-item {
		max-width: 500upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34upx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}
.tui-list-cell-name {
		min-width: 100upx;
		// padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
</style>
